<template>
  <div class="dashboard-container">
    时间：
    <el-select v-model="timeInterval" placeholder="请选择时间" style="width: 210px" @change="handleIntervalChange">
      <el-option v-for="item in timeIntervalOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>

    <panel-group :time-interval="timeInterval" @handleSetLineChartData="handleSetLineChartData" />

    <h4 class="line-chart-title">{{ lineChartTitle }}折线图</h4>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup'
import LineChart from './components/LineChart'
import dashboardApi from '@/api/dashboard'

const pannelMap = {
  user: '用户数量', amount: '成交金额', total: '成交单数'
}

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart
  },
  data() {
    return {
      timeIntervalOptions: [
        {
          value: 1,
          label: '近7天'
        },
        {
          value: 2,
          label: '近15天'
        },
        {
          value: 3,
          label: '近1个月'
        },
        {
          value: 4,
          label: '近3个月'
        }
      ],
      timeInterval: 1,
      currentType: 'user',
      lineChartTitle: '',
      lineChartData: {
        xAxis: [], yAxis: []
      }
    }
  },
  created() {
    this.refreshLineChart()
  },
  methods: {
    handleSetLineChartData(type) {
      this.currentType = type
      this.refreshLineChart()
    },
    handleIntervalChange(val) {
      this.timeInterval = val
      this.refreshLineChart()
    },
    timeIntervalLabel(value) {
      return this.timeIntervalOptions[this.timeIntervalOptions.findIndex(ti => ti.value == value)].label
    },
    refreshLineChart() {
      this.lineChartTitle = this.timeIntervalLabel(this.timeInterval) + pannelMap[this.currentType]
      dashboardApi.lineChart({ timeInterval: this.timeInterval, type: this.currentType }).then(res => {
        const { xaxis, yaxis } = res.data
        this.lineChartData = {
          xAxis: xaxis,
          yAxis: yaxis,
          timeInterval: this.timeInterval
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .line-chart-title {
    font-size: 16px;
    font-weight: normal;
    color: #5a5e66;
    font-family: "微软雅黑";
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
